<template>
  <div class="app-container">

    <div class="header">
      <el-button type="primary" @click="dialogSaveAdminForm = true" size="mini">添加</el-button>
      <el-input style="width: 300px; margin-left: 100px;" size="mini" placeholder="输入关键字搜索" v-model="adminListForm.mimo"
        @change="adminSearch" @input="checkVal">
        <i slot="suffix" class="el-icon-search"></i>
      </el-input>
    </div>

    <!-- 添加管理员弹出框 -->
    <el-dialog title="添加管理员" :visible.sync="dialogSaveAdminForm" :close-on-click-modal="false" @close="onCancel">
      <el-form ref="form" :model="form" label-width="100px" :rules="saveRules">
        <el-form-item label="账号" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" show-password />
        </el-form-item>
        <el-form-item label="昵称" prop="nick">
          <el-input v-model="form.nick" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="form.phone" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="loading">提交</el-button>
          <el-button @click="onCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 修改管理员弹出框 -->
    <el-dialog title="修改管理员" :visible.sync="dialogEditAdminForm" :close-on-click-modal="false" @close="closeEdit">
      <el-form ref="editForm" :model="editForm" label-width="100px" :rules="editRules">
        <el-form-item label="账号" prop="adminName">
          <el-input v-model="editForm.adminName" disabled />
        </el-form-item>
        <el-form-item label="昵称" prop="nick">
          <el-input v-model="editForm.nick" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="editForm.password" show-password />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="editForm.phone" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="edit">提交</el-button>
          <el-button @click="cancelEdit">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 管理员列表 -->
    <div class="content">
      <el-table :data="adminList" style="width: 100%;" stripe>
        <el-table-column label="管理员信息">
          <el-table-column label="账号" width="180" prop="adminName">
            <template slot-scope="scope">
              <div>{{ scope.row.adminName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="昵称" width="180" prop="adminNick">
            <template slot-scope="scope">
              <div>{{ scope.row.adminNick }}</div>
            </template>
          </el-table-column>
          <el-table-column label="手机号" width="180" prop="adminPhone">
            <template slot-scope="scope">
              <div>{{ scope.row.adminPhone }}</div>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column label="操作">
          <el-table-column label="修改">
            <template slot-scope="scope">
              <el-button type="primary" circle icon="el-icon-edit" @click="showEdit(scope.row.adminId)"></el-button>
            </template>
          </el-table-column>
          <el-table-column label="删除">
            <template slot-scope="scope">
              <el-button type="danger" circle icon="el-icon-delete" @click="delAdmin(scope.row.adminId)"></el-button>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="adminListSizeChange" @current-change="adminListCurrentChange"
        :page-size="adminListForm.size" :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next"
        :total="adminListTotal" style="margin-top: 20px;">
      </el-pagination>
    </div>


  </div>
</template>

<script>
import utils from '@/utils/checkLogin'
import { Message } from 'element-ui'
import { saveAdmin, getAdminList, getUpdateAdminInfo, editAdmin, deleteAdmin } from '@/api/api'

export default {
  data() {
    return {
      loading: false,
      form: {
        name: '',
        password: '',
        nick: '',
        phone: '',
      },
      dialogSaveAdminForm: false,
      saveRules: {
        name: [
          { required: true, message: '请输入账号', trigger: 'change' },
          { min: 5, max: 10, message: '账号长度在 5 到 10 个字符', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' },
          { min: 6, max: 16, message: '密码长度在 6 到 16 个字符', trigger: 'change' }
        ],
        nick: [
          { required: true, message: '请输入昵称', trigger: 'change' },
          { max: 5, message: '昵称长度最高 5 个字符', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'change' },
          { pattern: /^[1][3,4,5,7,8][0-9]{9}$/, message: '请输入正确的手机号', trigger: 'change' }
        ],
      },
      adminList: [],
      adminListForm: {
        page: 1,
        size: 10,
        mimo: ''
      },
      adminListTotal: 0,
      editForm: {
        adminId: null,
        phone: null,
        nick: '',
        password: '',
      },
      dialogEditAdminForm: false,
      editRules: {
        nick: [
          { required: true, message: '请输入昵称', trigger: 'change' },
          { max: 5, message: '昵称长度最高 5 个字符', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' },
          { min: 6, max: 16, message: '密码长度在 6 到 16 个字符', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'change' },
          { pattern: /^[1][3,4,5,7,8][0-9]{9}$/, message: '请输入正确的手机号', trigger: 'change' }
        ],
      },
    }
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate(valid => {
        // 表单验证失败
        if (!valid) {
          Message({
            message: '请检查表单！',
            type: 'warning',
            duration: 2000
          })
          return false
        } else {
          // 表单验证成功
          console.log(this.form);
          saveAdmin(this.form).then((res) => {
            if (res.code == 200) {
              Message({
                message: '添加成功',
                type: 'success',
                duration: 3000
              })
              console.log('添加管理员', res)
              this.loading = true
              setTimeout(() => {
                this.dialogSaveAdminForm = false
                this.loading = false
                this.getAdminListData()
                this.$nextTick(() => {
                  this.$refs.form.resetFields()
                })
              }, 2000)
            }
          })
        }
      })

    },
    onCancel() {
      this.dialogSaveAdminForm = false
      this.$nextTick(() => {
        this.$refs.form.resetFields()
      })

    },
    getAdminListData() {
      getAdminList(this.adminListForm).then((res) => {
        if (res.code == 200) {
          console.log('管理员列表', res);
          this.adminList = res.data
          this.adminListTotal = res.total
        }
      })
    },
    // 管理员列表，切换每页条数时
    adminListSizeChange(e) {
      this.adminListForm.size = e
      this.getAdminListData()
    },

    // 管理员列表，点击切换页码时
    adminListCurrentChange(e) {
      this.adminListForm.page = e
      this.getAdminListData()
    },

    // 展示修改弹出框
    showEdit(adminId) {
      this.dialogEditAdminForm = true
      this.editForm.adminId = adminId
      // 数据回显
      getUpdateAdminInfo(adminId).then((res) => {
        if (res.code == 200) {
          console.log('修改管理员（数据回显）', res)
          this.editForm.adminName = res.data.adminName
          this.editForm.nick = res.data.adminNick
          this.editForm.password = res.data.password
          this.editForm.phone = res.data.adminPhone
        }
      })
    },

    // 关闭修改弹出框
    closeEdit() {
      this.dialogEditAdminForm = false
    },

    // 编辑-提交
    edit() {
      this.$refs.editForm.validate(valid => {
        if (!valid) {
          Message({
            message: '请检查表单！',
            type: 'warning',
            duration: 2000
          })
          return false;
        } else {
          editAdmin(this.editForm).then((res) => {
            if (res.code == 200) {
              console.log('修改管理员', res);
              Message({
                message: '修改成功',
                type: 'success',
                duration: 3000
              })
              this.loading = true
              setTimeout(() => {
                this.dialogEditAdminForm = false
                this.loading = false
                this.getAdminListData()
              }, 2000)
            }
          })
        }
      })
    },

    // 取消编辑
    cancelEdit() {
      this.dialogEditAdminForm = false
    },

    delAdmin(adminId) {
      this.$confirm('确定删除该管理员吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAdmin(adminId).then((res) => {
          if (res.code == 200) {
            console.log('删除成功', res);
            this.$message({
              type: 'success',
              message: '删除成功',
              duration: 3000
            })
            this.getAdminListData()
          } else {
            this.$message({
              type: 'error',
              message: '删除失败',
              duration: 3000
            })
          }
        })
      }).catch(() => {
      })
    },
    // 搜索
    adminSearch() {
      this.getAdminListData()
    },
    // 如果搜索框的值为空，刷新一下列表
    checkVal() {
      if (this.adminListForm.mimo == '') {
        this.getAdminListData()
      }
    }
  },
  created() {
    utils.checkLogin()
    this.getAdminListData()
  }
}
</script>

<style lang="less" scoped>
.app-container {
  padding: 40px;

  .header {
    align-items: center;
    display: flex;
    margin-bottom: 20px;

    .el-icon-search {
      cursor: pointer;
      margin-right: 4px;
      margin-top: 8px;
    }
  }

  .content {
    text-align: center;
  }
}
</style>
